<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .tab {
        width: 600px;
        height: 600px;
        border: 1px solid red;
    }

    .top {
        display: flex;
        justify-content: space-between;
    }

    .select {
        background-color: red;
        color: #fff;
    }

    .top {
        position: relative;
    }

    .line {
        width: 50px;
        height: 3px;
        background-color: blue;
        position: absolute;
        bottom: -5px;
        transition: all 0.3s;

    }
</style>

<body>
    <div id="app">
        <div class="tab">
            <div class="top">
                <!-- class 的绑定 -->
                <!-- 对象形式  key 属性为 class名称  当vlaue 为true 就生效 -->
                <span v-bind:class="{ select:selectnnum == index }" @click="selectnnum = index"
                    v-for="item,index in tablist">{{item}}</span>
                <div v-bind:style="{transform: `translateX(${selectnnum*180}px)`}" class="line"></div>
                <!-- <div v-bind:style="{transform: 16px}" class="line"></div> -->
                <!-- bind  让 clss  让style 都支持 vuejs 语法 目前 可是写对象  vaule记得合法的数据类型 -->
            </div>
            <div class="content">
                <div v-show="selectnnum == 0">111111111111</div>
                <div v-show="selectnnum == 1">2222222222222</div>
                <div v-show="selectnnum == 2">3333333333</div>
                <div v-show="selectnnum == 3">44444444444444</div>
            </div>


        </div>

    </div>
</body>
<script src="../../static/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            selectnnum: 0,
            tablist: ["标签1", "标签2", "标签3", "标签4"]
        }
    })
    // var obj ={transform: 16px}

</script>

</html>